<template>
  <div>
     <h1>子组件</h1> 
     <div>{{ message }}</div>
  </div>
</template>

<script setup>
    import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
    // 子组件可以通过 expose 暴露自身的方法和数据。
    const message = ref('蟑螂恶霸');
    
    const changeMessage = (data)=>{
        message.value = data;
    }
    

    // 使用defineExpose向外暴露指定的数据和方法
    defineExpose({
        message,
        changeMessage
    })
</script>
<style scoped>
    
</style>